import '../assets/css/login.less'
import React from 'react'
class Reg extends React.Component {
    constructor(props) {
        super(props);

        console.log(props);

        //定义
        this.state = {
            title: "密码登录",
            isShow:false,
            userInfo: {
                name: "张三",
                age: "20"
            }
        }

    }
    submit() {
        console.log(this.userName.value);
        console.log(this.passWord.value);

    }
    checkLogin() {

 
        this.setState({ title: this.state.title=="短信登录" ? "密码登录" : "短信登录"});


        //  this.setState((preState)=>{

        //     console.log(preState.title);
        //     console.log(preState.userInfo);

        //     return{
        //         title:"短信登录"
        //     }

        //  },);



        this.setState({ userInfo: { ...this.state.userInfo, name: "李四" } });




    }
    setValue() {

        this.userName.value = "admin"

    }
    loginContent() {

        if(this.state.title=="密码登录"){

            return (

                <div>
                    <div>账号 <input ref={c => this.userName = c} type="text" /></div>
                    <div>密码 <input type='password' ref={c => this.passWord = c} /></div>
    
                </div>
            )
    

        }
        else{

            
            return (
                <div>
                    <div>手机号 <input ref={c => this.mobile = c} type="text" /></div>
                    <div>验证码 <input type='text' ref={c => this.code = c} /></div>
                </div>
            )
    
        }

      

    }
    show(){
        this.setState({isShow:true})
    }


    render() {
        return <div className='login-body'>
            <div>
                <div ref={c => this.div1 = c}>
                    {this.props.msg}
                </div>
                {/* {this.state.userInfo.name}
            {this.state.userInfo.age} */}
            </div>
            <div>{this.state.title}</div>

            {this.loginContent()}

            <div><button onClick={() => this.submit()}>登录</button></div>
            {/* <div><button  onClick={()=>this.setValue()}>回显</button></div> */}

            <div onClick={() => this.checkLogin()}>
                
                {
                    this.state.title=="密码登录" ? <label>短信登录</label> : <label>密码登录</label>
                }

            </div>


            {
                this.state.isShow &&
                <div>显示</div>
            }
            <button onClick={()=>this.show()}>显示</button>
           


        </div>

    }
}
export default Reg;